<template>
  <el-dialog
    class="custom-dialog"
    v-model="dialogVisible"
    :title="title"
    width="800px"
    @close="handleClose"
  >
    <div class="custom-detail" v-if="form.userInfo.type === '1'">
      <el-row :gutter="20">
        <el-col :span="12">
          <el-row>
            <el-col :span="24">
              <span class="label">人员名称:</span>
              <span class="value">{{ form.userInfo.userName }}</span>
            </el-col>
            <el-col :span="24">
              <span class="label">联系电话:</span>
              <span class="value">{{ form.userInfo.userPhone }}</span>
            </el-col>
            <el-col :span="24">
              <span class="label">身份证号:</span>
              <span class="value">{{ form.userInfo.idCard }}</span>
            </el-col>
            <el-col :span="24">
              <span class="label">单位:</span>
              <span class="value">{{ form.detail.oaunit }}</span>
            </el-col>
            <el-col :span="24">
              <span class="label">部门:</span>
              <span class="value">{{ form.userInfo.deptName }}</span>
            </el-col>
            <el-col :span="24">
              <span class="label">主岗:</span>
              <span class="value">{{ form.coreUserMetaInfo.mainPost }}</span>
            </el-col>
            <el-col :span="24">
              <span class="label">副岗:</span>
              <span class="value">{{
                form.coreUserMetaInfo.assistantPost
              }}</span>
            </el-col>
            <el-col :span="24">
              <span class="label">职务级别:</span>
              <span class="value">{{ form.coreUserMetaInfo.jobLevel }}</span>
            </el-col>
            <el-col :span="24">
              <span class="label">车牌号码:</span>
              <span class="value">{{ form.coreUserMetaInfo.cardNo }}</span>
            </el-col>
            <!-- <el-col :span="24">
              <span class="label">关联片区:</span>
              <span class="value">{{ form.coreUserMetaInfo.deptName }}</span>
            </el-col> -->
            <el-col :span="24">
              <span class="label">是否巡检人员:</span>
              <span class="value">{{
                getDictValue('yn', form.coreUserMetaInfo.isPatrol)
              }}</span>
            </el-col>
            <!--            <el-col :span="24">-->
            <!--              <span class="label">访问区域:</span>-->
            <!--              <span class="value">{{ form.detail.visitRegionName }}</span>-->
            <!--            </el-col>-->
            <el-col :span="24">
              <span class="label">备注:</span>
              <span class="value">{{ form.userInfo.remark }}</span>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="12">
          <el-row>
            <el-col :span="24">
              <span class="label">人员图片:</span>
              <span class="value">
                <FileList
                  fileType="picture"
                  :list="form.coreUserMetaInfo.files"
                />
              </span>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
    </div>
    <div
      class="custom-detail"
      v-else-if="['2', '3', '4'].includes(form.userInfo.type)"
    >
      <el-row :gutter="20">
        <el-col :span="12">
          <el-row>
            <el-col :span="24">
              <span class="label">人员名称:</span>
              <span class="value">{{ form.userInfo.userName }}</span>
            </el-col>
            <el-col :span="24">
              <span class="label">联系电话:</span>
              <span class="value">{{ form.userInfo.userPhone }}</span>
            </el-col>
            <el-col :span="24">
              <span class="label">身份证号:</span>
              <span class="value">{{ form.coreUserMetaInfo.idCard }}</span>
            </el-col>
            <el-col :span="24">
              <span class="label">单位:</span>
              <span class="value">{{
                form.detail.unitName ||
                form.detail.relationUnit ||
                form.coreUserMetaInfo.unitContent
              }}</span>
            </el-col>
            <el-col :span="24" v-if="form.userInfo.type === '2'">
              <span class="label">主岗:</span>
              <span class="value">{{
                getDictValue('main_post', form.coreUserMetaInfo.mainPost)
              }}</span>
            </el-col>
            <el-col :span="24">
              <span class="label">车牌号码:</span>
              <span class="value">{{ form.coreUserMetaInfo.cardNo }}</span>
            </el-col>
            <el-col :span="24">
              <span class="label">访问有效期:</span>
              <span class="value"
                >{{
                  moment(form.coreUserMetaInfo.visitStartTime).format(
                    'YYYY-MM-DD',
                  )
                }}
                -
                {{
                  moment(form.coreUserMetaInfo.visitEndTime).format(
                    'YYYY-MM-DD',
                  )
                }}</span
              >
            </el-col>
            <!--            <el-col :span="24">-->
            <!--              <span class="label">访问区域:</span>-->
            <!--              <span class="value">{{ form.detail.visitRegionName }}</span>-->
            <!--            </el-col>-->
            <el-col :span="24">
              <span class="label">备注:</span>
              <span class="value">{{ form.userInfo.remark }}</span>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="12">
          <el-row>
            <el-col :span="24">
              <span class="label">人员图片:</span>
              <span class="value">
                <FileList
                  fileType="picture"
                  :list="form.coreUserMetaInfo.files"
                />
              </span>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
    </div>
    <div class="custom-detail" v-else-if="form.userInfo.type === '5'">
      <el-row :gutter="20">
        <el-col :span="24">
          <span class="label">账号:</span>
          <span class="value">{{ form.userInfo.loginName }}</span>
        </el-col>
        <el-col :span="24">
          <span class="label">人员名称:</span>
          <span class="value">{{ form.userInfo.userName }}</span>
        </el-col>
        <el-col :span="24">
          <span class="label">角色:</span>
          <span class="value">{{ form.userInfo.roleName }}</span>
        </el-col>
        <el-col :span="24">
          <span class="label">备注:</span>
          <span class="value">{{ form.userInfo.remark }}</span>
        </el-col>
        <el-col :span="24">
          <span class="label">是否启用:</span>
          <span class="value">{{
            getDictValue('yn', form.userInfo.userState)
          }}</span>
        </el-col>
      </el-row>
    </div>
  </el-dialog>
</template>
<script setup>
import { ref, watch } from 'vue'
import FileList from '@/components/fileList/index.vue'
import moment from 'moment'
import { getUserDetail } from '@/api/manager/systemManage/user'
import { useDict } from '@/hooks/useDict'

const {
  dictOptions,
  initListDictOptions,
  initTreeDictOptions,
  getDictValue,
  getDictStyle,
} = useDict()
const props = defineProps({
  detail: {
    type: Object,
    default: () => {},
  },
})
watch(
  () => props.detail,
  async () => {
    if (props.detail.pkid && dialogVisible.value) {
      handleDetail()
    } else {
      form.value = {
        userInfo: {},
        coreUserMetaInfo: {
          files: [],
        },
        detail: {},
      }
    }
  },
)
const title = ref('')
const form = ref({
  userInfo: {},
  coreUserMetaInfo: {
    files: [],
  },
  detail: {},
})
const handleDetail = async () => {
  const res = await getUserDetail({ pkid: props.detail.pkid })
  if (res.success) {
    // 处理人员照片
    if (res.data.coreUserMetaInfo) {
      if (res.data.coreUserMetaInfo.faceId) {
        res.data.coreUserMetaInfo.files = [
          {
            pkid: res.data.coreUserMetaInfo.faceId,
            fileUrl: res.data.coreUserMetaInfo.faceUrl,
          },
        ]
      } else {
        res.data.coreUserMetaInfo.files = []
      }
    }
    form.value = { ...res.data, detail: props.detail }
    title.value = getDictValue('user_type', res.data.userInfo.type) + '人员详情'
  } else {
    ElMessage.error(res.message)
  }
}
const emit = defineEmits(['close'])
const dialogVisible = ref(false)
const handleClose = () => {
  dialogVisible.value = false
  emit('close')
}
defineExpose({ dialogVisible })
</script>
<style lang="scss" scoped>
.title {
  width: 100%;
  padding: 0 0 5px 15px;
  font-size: 14px;
  line-height: 14px;
  font-weight: 400;
  color: #151515;
  position: relative;
  margin-bottom: 10px;
  &::before {
    content: ' ';
    position: absolute;
    width: 4px;
    height: 16px;
    background: linear-gradient(0deg, #4575ee 0%, #6297f5 100%);
    border-radius: 2px;
    top: 0px;
    left: 0px;
  }
  .el-button {
    margin-left: 10px;
  }
}
</style>
